<script setup lang="ts">
  import { ref } from 'vue';
  import { useSkeleton } from '@/hooks/arco/useSkeleton';
  import { IconSearch, IconRefresh } from '@arco-design/web-vue/es/icon';
  import DemoDetailDrawer from './detail-drawer.vue';
  import useDetailDrawerHandler from '@/hooks/arco/useDetailDrawerBinder';

  // 模拟数据接口
  const mockData = [
    {
      id: 1,
      name: '张三',
      age: 25,
      email: 'zhangsan@example.com',
      department: '技术部',
      createdAt: '2023-01-15',
    },
    {
      id: 2,
      name: '李四',
      age: 30,
      email: 'lisi@example.com',
      department: '产品部',
      createdAt: '2023-02-20',
    },
    {
      id: 3,
      name: '王五',
      age: 28,
      email: 'wangwu@example.com',
      department: '设计部',
      createdAt: '2023-03-10',
    },
  ];

  // 表格列定义
  const columns = [
    {
      title: 'ID',
      dataIndex: 'id',
      width: 100,
    },
    {
      title: '姓名',
      dataIndex: 'name',
      width: 150,
    },
    {
      title: '年龄',
      dataIndex: 'age',
      width: 100,
    },
    {
      title: '邮箱',
      dataIndex: 'email',
      width: 200,
    },
    {
      title: '部门',
      dataIndex: 'department',
      width: 150,
    },
    {
      title: '创建时间',
      dataIndex: 'createdAt',
      width: 150,
    },
    {
      title: '操作',
      align: 'center' as const,
      dataIndex: 'action',
      slotName: 'action',
      fixed: 'right',
      width: 120,
    },
  ];

  // 搜索表单状态
  const searchForm = ref({
    name: '', // 姓名
  });

  // 使用骨架屏hook
  const skeletonView = useSkeleton({
    apiFun: (params) => {
      // 模拟API调用
      return new Promise((resolve) => {
        setTimeout(() => {
          let result = [...mockData];
          if (params?.name) {
            result = result.filter((item) => item.name.includes(params.name));
          }
          resolve(result);
        }, 500);
      });
    },
    immediate: true,
  });

  // 重置搜索表单
  const handleReset = () => {
    searchForm.value.name = '';
    skeletonView.retry();
  };

  // 执行搜索
  const handleSearch = () => {
    skeletonView.execute({
      name: searchForm.value.name,
    });
  };

  // 使用detail drawer handler
  const drawerHandler = useDetailDrawerHandler({
    onSuccess() {
      // 重新加载数据
      skeletonView.retry();
    },
  });

  // 显示新增弹窗
  const handleAdd = () => {
    drawerHandler.showAdd();
  };

  // 显示编辑弹窗
  const handleEdit = (record: any) => {
    drawerHandler.showEdit(record);
  };

  // 显示详情弹窗
  const handleDetail = (record: any) => {
    drawerHandler.showDetail(record);
  };
</script>

<template>
  <div class="flex flex-col">
    <!-- 搜索区域 -->
    <div class="flex">
      <a-form class="flex-1" :model="searchForm" label-align="right">
        <div class="form-wrapper">
          <a-form-item field="name" label="姓名">
            <a-input
              v-model="searchForm.name"
              placeholder="请输入姓名"
              allow-clear
            />
          </a-form-item>
        </div>
      </a-form>
      <div class="pb-[20px] flex">
        <a-divider direction="vertical" />
        <div class="flex flex-col justify-between gap-2">
          <a-button type="primary" @click="handleSearch">
            <template #icon>
              <icon-search />
            </template>
            查询
          </a-button>
          <a-button @click="handleReset">
            <template #icon>
              <icon-refresh />
            </template>
            重置
          </a-button>
        </div>
      </div>
    </div>

    <!-- 分割线 -->
    <a-divider margin="0" />

    <!-- 骨架屏容器 -->
    <SkeletonView v-bind="skeletonView.bindProps">
      <template #default="{ data }">
        <!-- 表格区域 -->
        <div class="flex justify-between mb-3 mt-[20px]">
          <a-space>
            <a-button type="primary" @click="handleAdd">
              <template #icon>
                <icon-search />
              </template>
              新增
            </a-button>
          </a-space>
        </div>

        <!-- 表格 -->
        <a-table
          :data="data || []"
          :columns="columns"
          :row-key="'id'"
          :bordered="false"
        >
          <template #action="{ record }">
            <a-space>
              <a-button size="small" type="text" @click="handleDetail(record)"
                >详情</a-button
              >
              <a-button size="small" type="text" @click="handleEdit(record)"
                >编辑</a-button
              >
              <a-button size="small" type="text" status="danger">删除</a-button>
            </a-space>
          </template>
        </a-table>
      </template>
    </SkeletonView>

    <!-- 详情抽屉 -->
    <DemoDetailDrawer v-bind="drawerHandler.bindProps" />
  </div>
</template>

<style lang="less" scoped>
  .form-wrapper {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0 10px;
  }
</style>
